import React from 'react';
import PropTypes from 'prop-types';
import s from './BugStore.module.css';
import cn from 'classnames';
import SvgIcon from '../SvgIcon/Icon';
import { Link } from 'react-router-dom';
import Tooltip from '@kuiper-components/tooltip';

const numFormat = function (num) {
	try {
		return new Intl.NumberFormat('en-US').format(num);
	} catch {
		return num.toLocaleString('en-US');
	}
};
export default function bottomBox({ className, bugStore }) {
	const [animation, setAnimation] = React.useState('none');
	const handleMouseOver = () => {
		setAnimation('paused');
	};
	const handleMouseOut = () => {
		setAnimation('running');
	};
	const linkUrl = name => {
		return `/general/bug-store?vuln_name=${name}`;
	};
	const BugStore = () => {
		const bugLength = bugStore.names?.length || 0;
		if (bugLength) {
			const arr = [];
			for (let i = 0; i < bugLength - 1; i++) {
				if (i % 2 === 0) {
					arr.push(
						<div className={s.namesBoxScoll} key={i}>
							<Link to={linkUrl(bugStore.names[i])}>
								<Tooltip
									placement="top"
									overlayClassName={s.overlay}
									overlay={bugStore.names[i]}
								>
									<p className={cn(s.nameP)}>{bugStore.names[i]}</p>
								</Tooltip>
							</Link>
							<Link to={linkUrl(bugStore.names[i + 1])}>
								<Tooltip
									placement="top"
									overlayClassName={s.overlay}
									overlay={bugStore.names[i + 1]}
								>
									<p className={cn(s.nameP)}>{bugStore.names[i + 1]}</p>
								</Tooltip>
							</Link>
						</div>
					);
				}
			}
			return arr;
		} else {
			return null;
		}
	};
	return (
		<div className={s.bugStore}>
			<div className={s.bugTotal}>
				<p>
					漏洞库：<mark>{numFormat(bugStore.count || '0')}</mark>
					<span className={s.up}>
						<SvgIcon name="up" />
					</span>
				</p>
				<div>
					<Link to="/general/bug-store">{'更多>'}</Link>
				</div>
			</div>
			<div className={s.namesBox}>
				<div
					className={s.namesBoxS}
					onMouseEnter={handleMouseOver}
					onMouseLeave={handleMouseOut}
					style={{ 'animation-play-state': animation }}
				>
					{BugStore()}
				</div>
			</div>
		</div>
	);
}
bottomBox.propTypes = {
	className: PropTypes.string,
	bugStore: PropTypes.any,
	seebug: PropTypes.any,
	account: PropTypes.any,
};

bottomBox.defaultProps = {
	className: s.chartBox,
	bugStore: { account: 0, names: [] },
};
